// 外观设置面板
// 主题、颜色、布局等外观相关设置

import React from 'react';
import { SettingItem } from '../components/SettingItem';
import { BaseSetting, SettingsCategory, SettingType } from '../../../types/settings';

// 外观设置定义
const appearanceSettings: BaseSetting[] = [
  // 主题组
  {
    id: 'appearance.theme',
    name: '颜色主题',
    description: '应用程序的整体颜色主题',
    category: SettingsCategory.Appearance,
    type: SettingType.Select,
    defaultValue: 'auto',
    currentValue: 'auto',
    group: 'theme',
    validation: {
      options: [
        { value: 'light', label: '浅色主题' },
        { value: 'dark', label: '深色主题' },
        { value: 'auto', label: '跟随系统' }
      ]
    },
    tags: ['主题', '颜色', '外观']
  },
  {
    id: 'appearance.followSystemTheme',
    name: '跟随系统主题',
    description: '自动根据系统设置切换明暗主题',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'theme',
    tags: ['主题', '系统', '自动']
  },
  {
    id: 'appearance.accentColor',
    name: '强调色',
    description: '界面中的强调色，用于按钮、链接等元素',
    category: SettingsCategory.Appearance,
    type: SettingType.Color,
    defaultValue: '#007ACC',
    currentValue: '#007ACC',
    group: 'theme',
    tags: ['颜色', '强调', '按钮']
  },

  // 布局组
  {
    id: 'appearance.sidebarPosition',
    name: '侧边栏位置',
    description: '文件资源管理器侧边栏的位置',
    category: SettingsCategory.Appearance,
    type: SettingType.Select,
    defaultValue: 'left',
    currentValue: 'left',
    group: 'layout',
    validation: {
      options: [
        { value: 'left', label: '左侧' },
        { value: 'right', label: '右侧' }
      ]
    },
    tags: ['侧边栏', '位置', '布局']
  },
  {
    id: 'appearance.panelPosition',
    name: '面板位置',
    description: '终端和输出面板的位置',
    category: SettingsCategory.Appearance,
    type: SettingType.Select,
    defaultValue: 'bottom',
    currentValue: 'bottom',
    group: 'layout',
    validation: {
      options: [
        { value: 'bottom', label: '底部' },
        { value: 'right', label: '右侧' }
      ]
    },
    tags: ['面板', '位置', '终端']
  },
  {
    id: 'appearance.showActivityBar',
    name: '显示活动栏',
    description: '显示左侧的活动栏（文件、搜索、Git等图标）',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'layout',
    tags: ['活动栏', '显示', '图标']
  },
  {
    id: 'appearance.showStatusBar',
    name: '显示状态栏',
    description: '显示底部的状态栏',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'layout',
    tags: ['状态栏', '显示', '底部']
  },
  {
    id: 'appearance.showToolbar',
    name: '显示工具栏',
    description: '显示顶部的工具栏',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'layout',
    tags: ['工具栏', '显示', '顶部']
  },

  // 字体组
  {
    id: 'appearance.uiFontFamily',
    name: '界面字体',
    description: '用户界面使用的字体系列',
    category: SettingsCategory.Appearance,
    type: SettingType.Font,
    defaultValue: 'system-ui, -apple-system, sans-serif',
    currentValue: 'system-ui, -apple-system, sans-serif',
    group: 'fonts',
    tags: ['字体', '界面', '系统']
  },
  {
    id: 'appearance.uiFontSize',
    name: '界面字体大小',
    description: '用户界面的字体大小',
    category: SettingsCategory.Appearance,
    type: SettingType.Number,
    defaultValue: 13,
    currentValue: 13,
    group: 'fonts',
    validation: {
      min: 10,
      max: 20
    },
    tags: ['字体', '大小', '界面']
  },

  // 图标组
  {
    id: 'appearance.iconTheme',
    name: '图标主题',
    description: '文件和文件夹的图标主题',
    category: SettingsCategory.Appearance,
    type: SettingType.Select,
    defaultValue: 'default',
    currentValue: 'default',
    group: 'icons',
    validation: {
      options: [
        { value: 'default', label: '默认' },
        { value: 'minimal', label: '简约' },
        { value: 'colorful', label: '彩色' }
      ]
    },
    tags: ['图标', '主题', '文件']
  },
  {
    id: 'appearance.showFileIcons',
    name: '显示文件图标',
    description: '在文件列表中显示文件类型图标',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'icons',
    tags: ['图标', '文件', '显示']
  },
  {
    id: 'appearance.showFolderIcons',
    name: '显示文件夹图标',
    description: '在文件列表中显示文件夹图标',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'icons',
    tags: ['图标', '文件夹', '显示']
  },

  // 动画组
  {
    id: 'appearance.enableAnimations',
    name: '启用动画',
    description: '启用界面动画效果',
    category: SettingsCategory.Appearance,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'animations',
    tags: ['动画', '效果', '界面']
  },
  {
    id: 'appearance.animationDuration',
    name: '动画持续时间',
    description: '界面动画的持续时间（毫秒）',
    category: SettingsCategory.Appearance,
    type: SettingType.Number,
    defaultValue: 200,
    currentValue: 200,
    group: 'animations',
    validation: {
      min: 0,
      max: 1000
    },
    tags: ['动画', '持续时间', '毫秒']
  },

  // 透明度组
  {
    id: 'appearance.windowOpacity',
    name: '窗口透明度',
    description: '主窗口的透明度（1.0为完全不透明）',
    category: SettingsCategory.Appearance,
    type: SettingType.Number,
    defaultValue: 1.0,
    currentValue: 1.0,
    group: 'opacity',
    validation: {
      min: 0.1,
      max: 1.0
    },
    tags: ['透明度', '窗口', '不透明']
  }
];

// 设置组配置
const settingGroups = [
  {
    id: 'theme',
    name: '主题和颜色',
    description: '颜色主题、强调色等颜色相关设置'
  },
  {
    id: 'layout',
    name: '布局',
    description: '界面布局、面板位置等布局相关设置'
  },
  {
    id: 'fonts',
    name: '字体',
    description: '界面字体相关设置'
  },
  {
    id: 'icons',
    name: '图标',
    description: '文件和文件夹图标相关设置'
  },
  {
    id: 'animations',
    name: '动画效果',
    description: '界面动画和过渡效果设置'
  },
  {
    id: 'opacity',
    name: '透明度',
    description: '窗口和面板透明度设置'
  }
];

export const AppearanceSettingsPanel: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          外观设置
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          自定义应用程序的外观和主题
        </p>
      </div>

      {settingGroups.map((group) => {
        const groupSettings = appearanceSettings.filter(s => s.group === group.id);
        
        return (
          <div key={group.id} className="space-y-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {group.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {group.description}
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {groupSettings.map((setting) => (
                  <div key={setting.id} className="px-4">
                    <SettingItem setting={setting} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
